import React, { Component } from 'react';
import '../../style/login.less';
import { Form, Icon, Input, Button, Checkbox, message, Spin } from 'antd';
import fetchRequest from '../../fetch/fetchRequest'

const FormItem = Form.Item;

class NormalLoginForm extends Component {
    state = {
        isLoding: false,
    };

    componentWillMount() {
        // 获取用户列表
        fetchRequest.fetchR('users', 'GET')
            .then((response) => {
                this.setState({
                    login: response
                })
            }).catch((err) => {  //网络请求失败返回的数据
                message.error('用户数据获取失败')
            });
    }

    PatchUser(values) {  //匹配用户
        const { login } = this.state;
        const results = login.map(function (item) {
            if (values.username === item.username && values.password === item.password) {
                return 1;
            } else {
                return 0;
            }
        });
        return results.includes(1);
    };

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                if (this.PatchUser(values)) {
                    this.setState({
                        isLoding: true,
                    });

                    localStorage.setItem('mspa_user', JSON.stringify(values));
                    message.success('login successed!'); //成功信息
                    let that = this;
                    setTimeout(function () { //延迟进入
                        values.username === 'admin' || values.username === 'admin_1' ? that.props.history.push({ pathname: '/app', state: values }) :
                            that.props.history.push({ pathname: '/app/order', state: values });
                    }, 2000);

                } else {
                    message.error('用户名密码不匹配！')
                }
            }
        });
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            this.state.isLoding ? <Spin size="large" className="loading" /> :
                <div>
                    <div className="body"></div>
                    <div className="grad"></div>
                    <div className="login">
                        <div className="login-form">
                            <div className="login-logo">
                                <div className="login-name">月亮补单管理系统</div>
                            </div>
                            <Form onSubmit={this.handleSubmit} style={{ maxWidth: '300px' }}>
                                <FormItem>
                                    {getFieldDecorator('username', {
                                        rules: [{ required: true, message: '请输入用户名!' }],
                                    })(
                                        <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="用户名" />
                                    )}
                                </FormItem>
                                <FormItem>
                                    {getFieldDecorator('password', {
                                        rules: [{ required: true, message: '请输入密码!' }],
                                    })(
                                        <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="密码" />
                                    )}
                                </FormItem>
                                <FormItem style={{ marginBottom: '0' }}>
                                    {getFieldDecorator('remember', {
                                        valuePropName: 'checked',
                                        initialValue: true,
                                    })(
                                        <Checkbox>记住我</Checkbox>
                                    )}
                                    {/* <a className="login-form-forgot" href="" style={{ float: 'right' }}>忘记密码?</a> */}
                                    <Button type="primary" htmlType="submit" className="login-form-button" style={{ width: '100%' }}>
                                        登录
                                </Button>
                                    {/* Or <a href="">现在就去注册!</a> */}
                                </FormItem>
                            </Form>
                            {/* <div style={{ paddingTop: 10, color: '#FFCC33' }}>注：暂不支持IE、360浏览器，推荐使用谷歌、火狐、edge浏览器</div> */}
                        </div>
                    </div>
                </div>
        );
    }
}

const Login = Form.create()(NormalLoginForm);
export default Login;